<template>
  <!-- python gen: Sun Jun 13 06:58:18 2021  -->
  <div class="yj-data-form">
    <el-form
      size="medium"
      type="flex"
      :disabled="formDisableFlag"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="200px"
    >
      <!-- 
          <el-col :sm="12">
          <el-form-item prop="JRXKZH" label="金融许可证号">
            <el-input
              style="width: 300px"
              v-model.trim="ruleForm.JRXKZH"
            ></el-input>
          </el-form-item>
        </el-col> -->

      <!-- <el-col :sm="12">
            <el-form-item prop="oid" label="ID">
              <el-input
                maxlength="30"
                style="width: 300px"
                v-model.trim="ruleForm.oid"
              ></el-input>
            </el-form-item>
          </el-col>
     -->

      <!-- <el-col :sm="12">
            <el-form-item prop="subCount" label="子菜单数目">
              <el-input
                maxlength="30"
                style="width: 300px"
                v-model.trim="ruleForm.subCount"
              ></el-input>
            </el-form-item>
          </el-col> -->

      <el-col :sm="12">
        <el-form-item prop="type" label="type">
          <!-- <el-input
                maxlength="30"
                style="width: 300px"
                v-model.trim="ruleForm.type"
              ></el-input> -->

          <el-radio-group
            maxlength="30"
            style="width: 300px"
            v-model="ruleForm.type"
            size="mini"
          >
            <el-radio-button label="0">目录</el-radio-button>
            <el-radio-button label="1">菜单</el-radio-button>
            <!-- <el-radio-button label="2">按钮</el-radio-button> -->
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="icon" label="icon">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.icon"
          ></el-input> -->

          <el-popover
            placement="bottom-start"
            width="450"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input
              slot="reference"
              v-model="ruleForm.icon"
              style="width: 300px;"
              placeholder="点击选择图标"
              readonly
            >
              <svg-icon
                v-if="ruleForm.icon"
                slot="prefix"
                :icon-class="ruleForm.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="iframe" label="iframe">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.iFrame"
          ></el-input> -->

          <el-radio-group v-model="ruleForm.iframe" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="hidden" label="是否可见">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.hidden"
          ></el-input> -->

          <el-radio-group v-model="ruleForm.hidden" size="mini">
            <el-radio-button label="false">是</el-radio-button>
            <el-radio-button label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="title" label="title">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.title"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="path" label="path">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.path"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="name" label="name">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.name"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="component" label="component">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.component"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="menuSort" label="排序">
          <el-input-number
            :min="1"
            :max="999"
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.menuSort"
          ></el-input-number>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="cache" label="缓存">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.cache"
          ></el-input> -->

          <el-radio-group v-model="ruleForm.cache" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="pid" label="上级菜单">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.pid"
          ></el-input> -->

          <!-- <el-select
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.pid"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in menuselect"
              :key="item.oid"
              :label="item.title"
              :value="item.oid"
            >
            </el-option>
          </el-select> -->

          <treeselect
            v-model="ruleForm.pid"
            :options="menuselect"
            style="width: 300px;"
            placeholder="选择上级类目"
          />
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="permission" label="权限">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.permission"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
  name: "sysmenuForm",
  props: ["flag", "item", "menuselect"],
  components: { Treeselect, IconSelect },
  data() {
    return {
      formDisableFlag: false,
      ruleForm: {
        CHECK_ID: "",

        oid: "",

        pid: "",

        subCount: "",

        type: "",

        title: "",

        name: "",

        component: "",

        menuSort: "",

        icon: "",

        path: "",

        iframe: "",

        cache: "",

        hidden: "",

        permission: ""
      },
      rules: {
        oid: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        pid: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        type: [{ required: true, message: "不能为空", trigger: "blur" }],

        title: [{ required: true, message: "不能为空", trigger: "blur" }],

        // name: [{ required: true, message: "不能为空", trigger: "blur" }],

        component: [{ required: true, message: "不能为空", trigger: "blur" }],

        menuSort: [{ required: true, message: "不能为空", trigger: "blur" }],

        icon: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        path: [{ required: true, message: "不能为空", trigger: "blur" }],

        iframe: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        cache: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        hidden: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        permission: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 选中图标
    selected(name) {
      this.ruleForm.icon = name;
    },
    goAdd() {
      Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ""));
      this.ruleForm.enabled = true;
    },
    goUpdate() {
      //   Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ""));
      //   //   this.dialogFormVisible = true;
      //   this.ruleForm.enabled = true;
    },
    validateIt() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$emit("goSave", null);
        }
      });
    }
  },
  mounted() {
    this.ruleForm = this.item;
    if ("add" === this.flag) {
      this.goAdd();
    }
    if ("view" === this.flag) {
      this.formDisableFlag = true;
    }

    // if ("update" === this.flag) {
    //   this.goUpdate();
    // }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
